<template>
  <div class="container">
    <div class="view-main">
      <el-card>
        <!-- 头部搜索区域 -->
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form label-width="80px">
              <el-form-item label="关键字">
                <el-input
                  v-model="page.keyword"
                  style="width: 300px"
                  placeholder="根据编号搜索"
                  @keyup.enter.native="search"
                />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col>
            <el-row type="flex" justify="end">
              <el-col :span="6">
                <el-button size="small" @click="clear">清除</el-button>
                <el-button size="small" type="primary" @click="search"
                  >搜索</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- message区域 -->
        <el-alert
          :title="`数据一共${page.total}条`"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>

        <!-- 表格区域 -->
        <el-table :data="list" style="margin-top: 10px">
          <el-table-column
            label="编号"
            prop="id"
            align="center"
            width="200px"
          />
          <el-table-column
            label="题型"
            prop="questionType"
            align="center"
            width="100px"
          >
            <template #default="{ row }">{{
              row.questionType | formatQuestionType
            }}</template>
          </el-table-column>
          <el-table-column label="题目编号" align="center" width="200x">
            <template #default="{ row }">
              <div v-for="item in row.questionIDs" :key="item.number">
                <a
                  href="#"
                  style="color: rgb(0, 153, 255)"
                  @click.prevent="preview(item.id)"
                  >{{ item.number }}</a
                >
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addTime" align="center" />
          <el-table-column
            label="答题时间(s)"
            prop="totalSeconds"
            align="center"
            width="150px"
          />
          <el-table-column
            label="正确率(%)"
            prop="accuracyRate"
            align="center"
            width="150px"
          />
          <el-table-column label="录入人" prop="userName" align="center" width="150px"/>
          <el-table-column label="操作" align="center" width="120px">
            <template #default="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="deleteRandom(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            layout="prev, pager, next,sizes,jumper"
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pagesize"
            :page-sizes="[5, 10, 15, 20]"
            @current-change="pageChange"
            style="margin-top: 10px"
            @size-change="sizeChange"
          />
        </el-row>
      </el-card>
    </div>
    <QuestionsPreview
      :showDialog.sync="showDialog"
      :questionId="currentQuestionId"
      ref="QuestionPreview"
    />
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview.vue'
import { questionType } from '@/api/hmmm/constants'

export default {
  components: { QuestionsPreview },
  data () {
    return {
      searchForm: {
        keyword: '' // 搜索关键字
      },
      page: {
        page: 1, // 当前页数
        pagesize: 20, // 每页条数
        keyword: '', // 关键字
        total: 0 // 总数
      },
      list: [], // 表格数据
      showDialog: false, // 弹层显示与隐藏
      currentQuestionId: 0 // 当前问题ID
    }
  },
  created () {
    this.getRandoms()
  },
  methods: {
    // 获取表格数据
    async getRandoms () {
      const { data: res } = await randoms(this.page)
      this.page.total = res.counts
      this.list = res.items
    },
    // 搜索按钮
    search () {
      this.page.page = 1
      this.getRandoms()
    },
    // 清除按钮
    clear () {
      this.page.keyword = ''
      this.getRandoms()
    },
    // 翻页
    pageChange (newPage) {
      this.page.page = newPage
      this.getRandoms()
    },
    // 每页条数发生变化
    sizeChange (newSize) {
      this.page.pagesize = newSize
      this.getRandoms()
    },
    // 删除题组
    async deleteRandom (id) {
      try {
        await this.$confirm('此操作将永久删除该题组,是否继续', {
          type: 'warning'
        })
        await removeRandoms({ id })
        this.getRandoms()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 预览题目
    preview (id) {
      this.currentQuestionId = id
      this.$refs.QuestionPreview.getQuestionDetail(id)
      this.showDialog = true
    }
  },
  filters: {
    formatQuestionType (value) {
      const obj = questionType.find((item) => parseInt(value) === item.value)
      if (obj) return obj.label
      return '未知'
    }
  }
}
</script>
<style scoped lang='less'>
.view-main {
  padding: 5px 10px 0 10px;
  margin-bottom: 10px;
  ::v-deep .el-table th.is-leaf {
    background-color: #fafafa !important;
    border-bottom: 2px solid #e8e8e8;
  }
}
</style>
